<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>简易选型工具</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 text-gray-800 min-h-screen p-6">
  <div class="max-w-5xl mx-auto bg-white rounded-lg shadow-lg p-6">
    <h1 class="text-2xl font-bold mb-6 text-center">?? 简易选型工具（Weighted Decision Matrix）</h1>

    <div class="grid md:grid-cols-2 gap-6 mb-6">
      <div>
        <h2 class="text-lg font-semibold mb-2">添加维度</h2>
        <div class="flex flex-col gap-2">
          <input id="criterionName" type="text" placeholder="维度名称"
            class="px-3 py-2 border border-gray-300 rounded w-full" />
          <input id="criterionWeight" type="number" placeholder="权重（如 5）" min="1"
            class="px-3 py-2 border border-gray-300 rounded w-full" />
          <button onclick="addCriterion()" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded">
            ? 添加维度
          </button>
        </div>
      </div>

      <div>
        <h2 class="text-lg font-semibold mb-2">添加方案</h2>
        <div class="flex flex-col gap-2">
          <input id="optionName" type="text" placeholder="方案名称"
            class="px-3 py-2 border border-gray-300 rounded w-full" />
          <button onclick="addOption()" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded">
            ? 添加方案
          </button>
        </div>
      </div>
    </div>

    <div id="matrixContainer" class="overflow-x-auto mb-6"></div>

    <div class="text-center">
      <button onclick="calculate()" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded text-lg">
        ? 计算得分
      </button>
    </div>

    <div id="results" class="mt-8"></div>
  </div>

  <script>
    const criteria = [];
    const options = [];

    function renderMatrix() {
      const container = document.getElementById("matrixContainer");
      if (criteria.length === 0 || options.length === 0) {
        container.innerHTML = "<p class='text-gray-500 text-center'>请先添加维度和方案。</p>";
        return;
      }

      let table = "<table class='min-w-full border text-sm text-center'><thead><tr class='bg-gray-100'><th class='border px-2 py-2'>方案</th>";
      criteria.forEach(c => {
        table += `<th class='border px-2 py-2'>${c.name}<br><span class='text-sm text-gray-500'>权重: ${c.weight}</span></th>`;
      });
      table += "</tr></thead><tbody class='bg-white'>";

      options.forEach((opt, rowIndex) => {
        table += `<tr><td class='border px-2 py-2 font-medium'>${opt.name}</td>`;
        criteria.forEach((c, colIndex) => {
          table += `<td class='border px-2 py-2'>
                      <input type="number" min="0" max="10" data-row="${rowIndex}" data-col="${colIndex}"
                        class="w-16 px-2 py-1 border rounded text-center" />
                    </td>`;
        });
        table += "</tr>";
      });

      table += "</tbody></table>";
      container.innerHTML = table;
    }

    function addCriterion() {
      const name = document.getElementById("criterionName").value.trim();
      const weight = parseFloat(document.getElementById("criterionWeight").value);
      if (name && !isNaN(weight)) {
        criteria.push({ name, weight });
        document.getElementById("criterionName").value = "";
        document.getElementById("criterionWeight").value = "";
        renderMatrix();
      }
    }

    function addOption() {
      const name = document.getElementById("optionName").value.trim();
      if (name) {
        options.push({ name });
        document.getElementById("optionName").value = "";
        renderMatrix();
      }
    }

    function calculate() {
      const scores = options.map((opt, rowIndex) => {
        let total = 0;
        criteria.forEach((c, colIndex) => {
          const input = document.querySelector(`input[data-row="${rowIndex}"][data-col="${colIndex}"]`);
          const value = parseFloat(input.value) || 0;
          total += value * c.weight;
        });
        return { name: opt.name, score: total };
      });

      scores.sort((a, b) => b.score - a.score);
      const resultDiv = document.getElementById("results");
      resultDiv.innerHTML = `
        <h2 class="text-xl font-semibold mb-2">?? 结果排名</h2>
        <ol class="list-decimal pl-6 space-y-1">
          ${scores.map(s => `<li><strong>${s.name}</strong>：总分 <span class="text-blue-600 font-bold">${s.score.toFixed(2)}</span></li>`).join("")}
        </ol>`;
    }
  </script>
</body>
</html>